<template>
  <div>
    <boardhr></boardhr>
    <div class="user">
      <div class="geren">
        <div class="user-left">
          <div class="zhongxin">个人中心</div>
          <div
            class="wode"
            @click="change(1)"
            :class="{ active: boardIndex == 1 }"
          >
            我的订单
          </div>
          <div
            class="jiben"
            @click="change(2)"
            :class="{ active: boardIndex == 2 }"
          >
            基本信息
          </div>
        </div>
        <div class="user-right">
          <dingdan v-if="boardIndex == 1"></dingdan>
          <mine v-else-if="boardIndex == 2"></mine>
        </div>
      </div>
    </div>

    <homefooter></homefooter>
  </div>
</template>

<script>
import dingdan from "./Dingdan";
import mine from "./Mine";
import boardhr from "../../components/home/header";
import homefooter from "../../components/home/homefooter";

export default {
  data() {
    return {
      boardIndex: 1,
    };
  },
  components: {
    dingdan,
    mine,
    boardhr,
    homefooter,
  },
  methods: {
    change(index) {
      this.boardIndex = index;
    },
  },
};
</script>
<style scoped lang="scss">
.user {
  width: 100%;
  overflow: hidden;
  .geren {
    width: 1200px;
    min-height: 700px;
    background: #f4f3f4;
    margin: 10px auto;
    border: 1px solid #e1e1e1;
    overflow: hidden;
    margin-top: 120px;

    .user-left {
      width: 196px;
      min-height: 700px;
      float: left;
      background-color: #f4f3f4;

      .zhongxin {
        width: 196px;
        height: 100px;
        color: #222;
        font-weight: 400;
        text-align: center;
        line-height: 100px;
        // background: chartreuse;
        font-size: 20px;
      }
      .wode {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
      }
      .jiben {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .user-right {
      width: 1000px;
      min-height: 700px;
      float: right;
      background: #fff;
    }
  }
}
.active {
  color: #fff;
  background: #ef4238;
}
</style>